<!-- 发送资料 -->
<template>
  <div class="pdfFile">
    <lsj-upload
      ref="lsjUploadRef"
      childId="upload"
      :width="fileSetting.width"
      :height="fileSetting.height"
      :option="option"
      :toBase="fileSetting.toBase"
      :size="fileSetting.size"
      :count="fileSetting.count"
      :formats="fileSetting.formats"
      :debug="fileSetting.debug"
      :instantly="fileSetting.instantly"
      :distinct="fileSetting.distinct"
      @uploadEnd="onuploadEnd"
    >
      <ToolbarItemContainer
        :iconFile="Icon"
        title="PDF"
        :needBottomPopup="true"
        :iconWidth="isUniFrameWork ? '26px' : '20px'"
        :iconHeight="isUniFrameWork ? '26px' : '20px'"
        :needDialog="false"
        @onIconClick="onIconClick"
      />
    </lsj-upload>
  </div>
</template>
<script setup lang="ts">
import { CONFIG } from '@/config/app'
import { TUIGlobal } from '@tencentcloud/universal-api'
import TUIChatEngine, {
  TUIChatService,
  TUIStore,
  StoreName,
  IConversationModel,
} from '@tencentcloud/chat-uikit-engine'
import { ref, reactive } from '@/TUIKit/adapter-vue'
import ToolbarItemContainer from '@/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue'
import { isEnabledMessageReadReceiptGlobal } from '@/TUIKit/components/TUIChat/utils/utils'
import { isWeChat, isPC, isUniFrameWork } from '@/TUIKit/utils/env'
import Icon from '@/TUIWidget/static/icon/files.png'

import { sendGroupMessage, createSessionRecord, createMemberMessage } from '@/api/TIM'

const currentConversation = ref<IConversationModel>()
const lsjUploadRef = ref()

TUIStore.watch(StoreName.CONV, {
  currentConversation: (conversation: IConversationModel) => {
    currentConversation.value = conversation
  },
})

// 上传接口参数
const option = reactive({
  // 上传服务器地址，需要替换为你的接口地址
  url: CONFIG.HTTP_REQUEST_URL + 'app-api/infra/file/upload', // 该地址非真实路径，需替换为你项目自己的接口地址
  // 上传附件的key
  name: 'file',
  // 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
  header: {
    // 示例参数可删除
    Authorization: uni.getStorageSync('token'),
  },
  // 根据你接口需求自定义body参数
  formData: {
    // 'orderId': 1000
  },
})

const fileSetting = reactive({
  /**
   * 文件是否转base64
   * false: file为文件流，app端跨浏览器不能将文件流返回到当前页面，但不影响上传，如果是图片文件可通过绑定item.path到image标签src回显；
   * true: file转base64，注意：转base64后若使用组件内置上传，file的值为base64串，如果你服务端接口不要base64串那就instantly传false，自行处理；
   *
   * 提示：app端因为是跨浏览器的，所以不排除大文件转base64返回时url超长问题，我只测了一般大文件，若遇到那你只能自行改成sqlite或者localStroe
   * 温馨提示：：：：若无特殊需求建议传false，就不解释为什么了。
   */
  toBase: false,
  // 重名文件是否去重
  distinct: false,
  // 选择文件后是否立即自动上传，true=选择后立即上传
  instantly: true,
  // 必传宽高且宽高应与slot宽高保持一致
  width: '180rpx',
  height: '180rpx',
  // 限制允许上传的格式，空串=不限制，默认为空
  accept: 'application/pdf',
  formats: 'pdf',
  // 文件上传大小限制
  size: 30,
  // 文件数量限制
  count: 1,
  // 是否多选
  multiple: false,
  // 文件回显列表
  files: new Map(),
  // 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
  wxFiles: [],
  // 是否打印日志
  debug: false,
})

/** 点击事件 */
const onIconClick = () => {
  // console.log('-- 发送资料 ---------------->', lsjUploadRef.value)
}

// 发送文件消息
const sendFileMessage = (files: any) => {
  if (!files) return

  const message = {
    to:
      currentConversation?.value?.groupProfile?.groupID ||
      currentConversation?.value?.userProfile?.userID,
    conversationType: currentConversation?.value?.type,
    payload: {
      file: files.file,
    },
    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
  } as SendMessageParams

  console.log('-- sendFileMessage ---------------->', message)
  TUIChatService.sendFileMessage(message)
    .then(async imResponse => {
      // 发送成功
      lsjUploadRef.value.clear()

      /**
       * 创建聊天记录
       */
      createMemberMessage({
        recordId: `GROUP${message.to}`, // 会话ID
        sendMemId: (await TUIChatEngine).userID, // 发送方
        reciveMemId: message.to, // 接收方
        messageType: 'file', // 消息类型：text（文本消息）video（视频消息）image（图片消息）file（文件消息）
        messageContent: JSON.stringify(files),
      })
    })
    .catch(imError => {
      // 发送失败
      console.warn('sendMessage error:', imError)
    })
}

// 完成上传
const onuploadEnd = res => {
  console.log(`${res.name}已上传结束，上传状态=${res.type}`, res)

  // 发送群消息
  sendFileMessage(res)
}
</script>
<style scoped lang="scss" src="./style/index.scss"></style>
<style scoped lang="scss">
.pdfFile {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: static;
}
</style>
